<template>
    <div class="form-url-panel">
        <div class="row justify-content-md-center">
            <div class="col-6">
                <form @submit.prevent="submit">
                    <div class="form-group">
                        <input type="text" v-model="url"
                           :readonly="processing"
                           class="form-control"
                           placeholder="Enter a plist URL" />
                    </div>
                    <div class="form-group">
                        <input type="email" v-model="email"
                                   :readonly="processing"
                                   class="form-control"
                                   placeholder="Email for notifying" />
                    </div>
                    <div class="form-group">
                        <button v-if="!processing" type="submit" class="btn btn-outline-secondary">SUBMIT</button>
                        <button v-if="processing" type="button" class="btn btn-outline-secondary">Loading</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="row justify-content-md-center" v-if="done">
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <a :href="href" target="_blank" class="btn btn-success">Open APP Page</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row col-12 justify-content-md-center" v-if="failed || processing">
            <div class="col-6">
                <div class="card">
                    <div class="card-body">
                        <pre v-text="log"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import service from "../service/IPA2S3Service"

export default {
    name: "FromURL",

    data() {
        return {
            email: "",
            url: "",
            href: "#",
            log: "",
            processing: false,
            done: false,
            failed: false
        };
    },

    watch: {
        url(val) {
            if (val.length == 0) {
                this.reset();
            }
        }
    },

    methods: {
        reset() {
            this.done = false;
            this.processing = false;
            this.failed = false;
            this.href = "#";
            this.log = "";
        },
        submit() {
            if (this.processing) {
                return;
            }
            this.reset();
            this.processing = true;
            service.submit(this.url, this.email)
                .then((id) => {
                    return Promise.resolve(service.getResult(id));
                })
                .then((checker) => {
                    checker
                        .onProcess((log) => {
                            this.log = log;
                        })
                        .onDone((url) => {
                            this.done = true;
                            this.processing = false;
                            this.failed = false;
                            this.href = url;
                        })
                        .onFailed((log) => {
                            this.done = false;
                            this.processing = false;
                            this.failed = true;
                            this.log = log;
                        })
                });
        },
    }
}
</script>